<template>
  <h1 style="text-align: center" class="shifted-form">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<rocket-two-tone/>
    意图路由用户系统
  </h1>
  <a-form
      ref="formRef"
      :model="formState"
      :label-col="{ span: 8}"
      :wrapper-col="{ span: 16 }"
      name="nest-messages"
      :validate-messages="validateMessages"
      @finish="onFinish"
      class="custom-form shifted-form"
  >
    <a-row :gutter="24">
      <a-col :span="24">
        <a-form-item :name="['user', 'name']" label="姓名"
                     :rules="[{ required: true, message: 'Please input your name!' ,trigger: 'blur'}]">
          <a-input v-model:value="formState.user.name" placeholder="Please input your name" class="input-with-icon"/>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
            :name="['user','select']"
            label="任务类型"
            has-feedback
            :rules="[{ required: true, message: 'Please select one type you need ' ,trigger: 'change'}]"
        >
          <a-select v-model:value="formState.user.select"
                    placeholder="Please select one type you need ">
            <a-select-option value="plain">普通任务</a-select-option>
            <a-select-option value="智算大模型">智算大模型</a-select-option>
            <a-select-option value="智算人工智能">智算人工智能</a-select-option>
            <a-select-option value="泛算异地容灾">泛算异地容灾</a-select-option>
            <a-select-option value="AR/VR">AR/VR</a-select-option>
            <a-select-option value="数据处理和分析">数据处理和分析</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="24">
        <a-form-item :name="['user', 'number']" label="所需要cpu的个数"
                     :rules="[{ type: 'number', min: 0, max: 99, message: 'Please enter a number between 0 and 99!' }]">
          <a-input-number v-model:value="formState.user.number" class="input-number" :min="0" :max="99" placeholder="请选择你所需要的cpu个数（整数） "/>
        </a-form-item>
      </a-col>

      <a-col :span="24">
        <a-form-item :name="['user','time']" label="开始时间" v-bind="config">
          <a-date-picker
              class="custom-date-picker"
              v-model:value="formState.user.time"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>

      </a-col>
      <a-col :span="24">
        <a-form-item :name="['user', 'code']" label="源代码">
          <a-textarea v-model:value="formState.user.code" placeholder="Please input your code" rows="4"/>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item :name="['user', 'data']" label="源数据">
          <a-textarea v-model:value="formState.user.data" placeholder="Please input your data" rows="4"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item :wrapper-col="{ span: 24, offset: 0 }" class="text-right">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import {defineComponent, reactive, ref} from 'vue';
import axios from 'axios';
import {nextTick} from 'vue';
import {notification} from "ant-design-vue";

export default defineComponent({
  setup() {
    const formRef = ref(null);
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const config = {
      rules: [{
        type: 'string',
        required: true,
        trigger: 'blur',
        message: 'Please select time!',
      }],
    };
    ``

    const validateMessages = {
      required: '${label} is required!',
      types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
      },
      number: {
        range: '${label} must be between ${min} and ${max}',
      },
    };
    const formState = reactive({
      user: {
        name: '',
        number: undefined,

        code: '',
        time: '',
        data: '',
        select: ''
      },
    });
    const onFinish = async (values) => {
      try {
        await axios.post('http://127.0.0.1:5000/api/submit', formState.user);
        notification.success({ description: '发送数据成功！' });
        // 可选：处理成功后的逻辑，如清空表单、提示信息等
      } catch (error) {
        console.error('Error submitting data:', error);
        // 可选：处理错误逻辑
      }
    };

    return {
      formState,
      onFinish,
      layout,
      validateMessages,
      config,
      formRef
    };
  },
});
</script>
<style scoped>
.custom-form {
  max-width: 700px;
  margin: 0 auto;
}


.input-with-icon::before {
  content: "\ea66"; /* 使用实际的图标Unicode或class */
  font-family: 'Ant Design Icons'; /* 确保图标字体被正确引入 */
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #aaa;
  z-index: 1;
}

.input-number {
  width: 100%;
}

.text-right {
  text-align: right;
}

.shifted-form {
  margin-top: 50px; /* 根据需要调整数值来控制下移距离 */
}

.custom-date-picker {
  /* 调整日期选择器的宽度和高度 */
  width: 100%; /* 占满父元素宽度 */

  /* 更多样式根据需求添加 */
}
</style>
